<template>
  <div>
     <div>
        {{obj.a}} <button @click="obj.a++">a+</button>
     </div>
     <div>
        {{obj.b}} <button @click="obj.b++">a+</button>
     </div>
     <div>
        {{obj.c}} <button @click="obj.c++">a+</button>
     </div>
  </div>
</template>

<script>
/* 
  watch:{
    '对象名.属性名'(newval,oldval){
    }
  }
*/
export default {
  data(){
    return{
      obj:{
        a:10,
        b:20,
        c:30
      }
    }
  },
  watch:{
    'obj.a'(newval,oldval){
      console.log('obj.a',newval,oldval);
    },
    'obj.b'(newval,oldval){
      console.log('obj.b',newval,oldval);
    },
    'obj.c'(newval,oldval){
      console.log('obj.c',newval,oldval);
    }
  }
}
</script>

<style>

</style>